<!-- 报修记录 -->
<template>
  <div class="record-container">
    <BackgroundBox v-loadings="isLoading">
      <div class="main" v-if="props.recordData">
        <el-table
          :data="props.recordData"
          style="width: 100%; min-height: 200px"
        >
          <el-table-column prop="RepairDescription" label="报修描述" />
          <el-table-column label="报修图片">
            <template #default="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.RepairImg"
              />
            </template>
          </el-table-column>
          <el-table-column label="报修时间">
            <template #default="scope">
              <span>{{
                moment(scope.row.RepairStartTime).format("YYYY-MM-DD")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报修宿舍楼" prop="RepariDormitroy" />
          <el-table-column label="报修楼层" prop="RepariFloor" />
          <el-table-column label="报修宿舍" prop="RepariRoomNo" />
          <template v-if="props.isHandles === 1">
            <el-table-column label="完成图片">
              <template #default="scope">
                <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.RepairEndImg"
              />
              </template>
            </el-table-column>
            <el-table-column label="完成时间">
              <template #default="scope">
                <span>{{
                moment(scope.row.RepairEndTime).format("YYYY-MM-DD")
              }}</span>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="props.isHandles === 2">
            <el-table-column label="操作">
              <template #default="scope">
                <el-button @click="handleEdit(scope.row.id)" type="primary">
                  修复
                </el-button>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="props.total"
            :current-page="props.page"
            @current-change="currentChange"
          />
        </div>
      </div>
      <div class="main" v-else>
        <Unavailable></Unavailable>
      </div>
    </BackgroundBox>

    <el-dialog
      v-model="dialogTableVisible"
      title="完成修复"
      width="800"
      @close="close"
    >
      <el-form class="demo-form-inline" label-position="top">
        <el-form-item label="修复图片:" required>
          <uploadAvatar @click="changeImg" ref="uploadAvatarDom"></uploadAvatar>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm"
            >修复</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import Unavailable from "../../Unavailable/index.vue";
import { putService } from "@/api/service.js";
import uploadAvatar from "@/components/uploadAvatar/index.vue";
import moment from "moment";
import { ref } from "vue";
const uploadAvatarDom = ref()
const dialogTableVisible = ref(false);
const props = defineProps({
  recordData: {
    type: Object,
    required: true,
  },
  isHandles: {
    type: Number,
    required: true,
  },
  total: {
    type: Number,
    required: true,
  },
  page: {
    type: Number,
    default: 1,
  },
  isLoading:{
    type: Boolean,
    default: false
  }
});

// 网络请求需要的数据
const FromDataRef = ref({
  avatar: "",
  id: "",
});

// 获取图片
const changeImg = (data) => {
  FromDataRef.value.avatar = data;
};
// 修复按钮
const handleEdit = (data) => {
  dialogTableVisible.value = true;
  FromDataRef.value.id = data;
};
const emit = defineEmits(["currentChange","submitForm"]);
// 改变页码
const currentChange = (data) => {
  emit("currentChange", data);
};

// 关闭弹窗
const close = () => {
  dialogTableVisible.value = false;
  uploadAvatarDom.value.cleanUp()
  for (const key in FromDataRef.value) {
    FromDataRef.value[key] = "";
  }
};
// 提交按钮
const submitForm = async () => {
  if (FromDataRef.value.avatar) {
    const { data } = await putService(FromDataRef.value);
    if (data) {
      ElMessage({
        message: "维修成功",
        type: "success",
      });
      close();
      emit("submitForm")
    }
  } else {
    ElMessage.error("请选择图片");
  }
};
</script>

<style lang="less" scoped>
.record-container {
  width: 100%;
  .back-container {
    padding: 20px;
    position: relative;
    min-height: 300px;
  }
  .main {
    min-height: 200px;
  }

  .pagination {
    display: flex;
    justify-content: center;
    padding: 10px 0;
  }
  .uploadAvatar-container {
    width: 100px;
    height: 100px;
  }
}
</style>